<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>预约</title>
    <link href="/static/api/yuyue/css/yuyue.css" rel="stylesheet" />

</head>
<body>
    <div class="am-body-inner" id="box">
        <div class="barberDetail_base" style="height: 295px;">
            <div class="blurwrap">
                <img :src="user_info.headurl" alt="">
            </div>
            <div class="am-header">
                <div class="am-clickable am-backbutton button left">
                    <div class="backIcon"></div>
                </div>
                <div class="am-clickable button right share">
                    <div class="shareIcon"></div>
                </div>
                <p>${user_info.name}</p>
            </div>
            <div class="barberImgWrap">
                <div class="img barberImg">
                    <img :src="user_info.headurl">
                </div>
            </div>
            <ul class="textwrap">
                <li style="top:80px;left:35px;">波波头</li>
                <li style="top:110px;left:61px;">大波浪</li>
            </ul>
            <div class="barberbottom"></div>
        </div>
        <div class="barberDetail_text">
            <div class="name">${user_info.jobname}</div>
            <div class="level">${user_info.zhichengname}</div>
        </div>
        <div class="barberDetail">
            <div class="comment_desc">
                <div class="comment_desc_view am-clickable autoheight">中短发<span class="arrowmore"></span></div>
            </div>
            <div class="actions">
                <div class="archiveTimes">
                    <span class="num">18组</span>
                    <div class="text">作品</div>
                </div>
                <div class="reservationTimes">
                    <span class="num">${all_count}次</span>
                    <div class="text">被约</div>
                </div>
            </div>
        </div>
        <div class="addresstel">
            <div class="addresstelinner">
                <p class="top">${user_info.dname}</p>
                <p class="bottom">深圳88</p>
                <div @click="callphone()" class="telbtn am-clickable"></div>
            </div>
        </div>
        <div class="reservation_today am-clickable">
            <div class="reservation_todayinner">
                <p class="tit"><i class="today"></i>今日预约情况</p>
                <div class="today_wrap">
                    <p class="today_num">已有<span>${t_count}</span>人预约</p>
                    <i class="more"></i>
                </div>
            </div>
        </div>
        <!-- <div class="barberDetail_box archive_box am-clickable">
            <div class="tit">
                <p><i class="zp"></i>TA的作品</p>
                <a href="javascript:;" class="am-clickable tit_right">更多作品 <i class="more"></i> </a>
            </div>
            <div class="cont">
                <ul class="clearfix">
                    <li class="am-clickable">
                        <img src="http://resource.meiguanjia.net//show/s3/10000/2204310/629F6274-D6CC-4A76-98B9-2CA14472E824_s.jpg">
                    </li>
                    <li class="am-clickable">
                        <img src="http://resource.meiguanjia.net//show/s3/10000/2204310/629F6274-D6CC-4A76-98B9-2CA14472E824_s.jpg">
                    </li>
                </ul>
                <div class="clear"></div>
            </div>
        </div> -->
        <div class="am-placeholder reservationBtnGroup">
            <div class="reservation am-clickable" onclick="mytest()"><i class="aui-iconfont aui-icon-like" style="font-size:12px;padding-right:6px;"></i>预约</div>
        </div>

        <div id='user_id'>{{user_id}}</div>
    </div>
</body>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
    var vm;
    vm = new Vue({
        el: '#box',
        data: {
            user_info: '',
            t_count: '',
            all_count: '',
            testlist: '22222',
        },
        methods: {
            getinfo: function() {
                //ajax 数据传递
                var user_id = document.getElementById('user_id').innerHTML;

                //当日的开始时间戳和结束时间戳
                var timestamp = new Date();

                var myyear = timestamp.getFullYear();
                var mymonth = timestamp.getMonth();
                var mydate = timestamp.getDate();

                var begin_time = (Date.parse(new Date(myyear,mymonth,mydate,00,00,00)))/1000;
                var end_time = (Date.parse(new Date(myyear,mymonth,mydate,23,59,59)))/1000;

                $.ajax({
                    type: 'post',
                    url: '/wxfen/wxfen/getinfo',
                    data: {"user_id":user_id,"begin_time":begin_time,"end_time":end_time},
                    success: function(ret) {
                        if (ret.code == 100) {
                            vm.user_info = ret.data.info[0];
                            vm.t_count = ret.data.t_count;
                            vm.all_count = ret.data.all_count;
                        }
                    },
                    error: function(err) {
                        alert(JSON.stringify(err));
                    }
                });
            },
        },
        mounted: function() {
            this.getinfo();
        },
        delimiters:['${', '}'],
    });


});
//跳转到手机验证页面
function mytest() {
    var user_id = document.getElementById('user_id').innerHTML;
    window.location.href="/wxfen/wxfen/login.html?user_id=" + user_id;
}
</script>
</html>
